<template>
  <div class="page">
    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
      <el-tab-pane label="医生" name="doctor">
        <DoctorListModule listName="医生" type="0" :total="$store.state.doctor.doctor0Num" :list="$store.state.doctor.doctorList0"/>
      </el-tab-pane>
      <el-tab-pane label="健康管理师" name="health">
        <DoctorListModule listName="健康管理师" type="1" :total="$store.state.doctor.doctor1Num" :list="$store.state.doctor.doctorList1"/>
      </el-tab-pane>
      <el-tab-pane label="营养师" name="nutrition">
        <DoctorListModule listName="营养师" type="2" :total="$store.state.doctor.doctor2Num" :list="$store.state.doctor.doctorList2"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DoctorListModule from "../../components/doctorListModule.vue";
export default {
  name: "DoctorList",
  layout: "personalCenterLayout",
  components: { DoctorListModule },
  data() {
    return {
      activeName: "doctor",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  async asyncData({app,store}) {
    //获取对应类别的医生们列表
    let doctorRes0=await app.api.reqDoctorByPage(0);
    let doctorRes1=await app.api.reqDoctorByPage(1);
    let doctorRes2=await app.api.reqDoctorByPage(2);
    if(doctorRes0.code===200){
      for(let doctor of doctorRes0.rows){
        doctor.doctorAvatar=app.api.BASEURL+doctor.doctorAvatar
      }
      store.commit('doctor/SET_DOCTOR0',doctorRes0.rows)
      store.commit('doctor/SET_DOCTOR0NUM',doctorRes0.total)
      // console.log('医生',doctorRes0);
    }
    if(doctorRes1.code===200){
      for(let doctor of doctorRes1.rows){
        doctor.doctorAvatar=app.api.BASEURL+doctor.doctorAvatar
      }
      store.commit('doctor/SET_DOCTOR1',doctorRes1.rows)
      store.commit('doctor/SET_DOCTOR1NUM',doctorRes1.total)
      // console.log('健康管理师',doctorRes1);
    }
    if(doctorRes2.code===200){
      for(let doctor of doctorRes2.rows){
        doctor.doctorAvatar=app.api.BASEURL+doctor.doctorAvatar
      }
      store.commit('doctor/SET_DOCTOR2',doctorRes2.rows)
      store.commit('doctor/SET_DOCTOR2NUM',doctorRes2.total)
    }
  },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  //   &:last-child {
  //     margin-bottom: 0;
  //   }
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.page {
  width: 100%;
  min-width: 1200px;
  text-align: center;
  min-height: calc(100vh - 65.5px);
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  background-color: #f6f7f9;
  .tabList {
    padding-left: 200px;
  }
  .doctorList-title {
    margin-top: 20px;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    padding-left: 10px;
    font-size: 18px;
    .icon-doctor {
      font-size: 26px;
      vertical-align: bottom;
      color: @themeColor;
    }
  }
  .doctorList-content {
    .adviser {
      margin-top: 20px;
      padding: 5px;
      padding-top: 20px;
      background: #fff;
      height: 330px;
      //   width: 400px;
      .adviser-info-left {
        text-align: right;
      }
      .adviser-photo {
        width: 100px;
        height: 100px;
        border-radius: 50px;
      }
      .adviser-text {
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 10px;
        font-size: 14px;
        .adviser-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .adviser-unit {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .adviser-introduce {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
      }
    }
    .pagination {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>